<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 定义组件属性
const props = defineProps<{
  modelValue: {
    page: number
    limit: number
  }
  total: number
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'update:modelValue', value: { page: number, limit: number }): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
}>()

// 响应式数据
const currentPage = ref(props.modelValue.page)
const pageSize = ref(props.modelValue.limit)

// 监听外部变化
watch(() => props.modelValue, (newVal) => {
  currentPage.value = newVal.page
  pageSize.value = newVal.limit
}, { deep: true })

// 监听内部变化
watch([currentPage, pageSize], ([newPage, newLimit]) => {
  emit('update:modelValue', { page: newPage, limit: newLimit })
})

// 方法
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  emit('size-change', size)
  emit('current-change', 1)
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  emit('current-change', page)
}
</script>

<style scoped lang="scss">
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>